import React, { useEffect, useState } from 'react'
import { useParams, useHistory } from "react-router-dom";
import { NavBar } from 'antd-mobile'
import { GetBrandDetail } from "../../../request/api";
import './style.scss'

export default function Root() {
  const { id } = useParams()
  const history = useHistory()
  const [title, setTitle] = useState('')
  const [brand, setBrand] = useState('')

  useEffect(() => {
    GetBrandDetail({ id }).then((res) => {
      setBrand(res.data.data.brand);
      setTitle(res.data.data.brand.name);
    });
  }, [])
  return (
    <div className="page" id="brandDetail">
      <NavBar onBack={() => history.goBack()}>{title}</NavBar>
      <div className="content">
        <div className="top">
          <img src={brand.app_list_pic_url} alt="" />
          <div className="top_title">{title}</div>
        </div>
        <div className="footer">
          <p>{brand.simple_desc}</p>
        </div>
      </div>
    </div>
  )
}
